<template>
  <el-card style="border-radius: 20px;" v-if="isCreated">
    <div id="Home">
      <el-row :gutter="20">
        <el-col :span="12" class="parent">
          <ClassAverageEchart :data="{classData,studentData,tagData}"></ClassAverageEchart>
        </el-col>
        <el-col :span="12" class="parent">
          <el-row :gutter="20">
            <el-col :span="24" class="item">
              <TagAverageEchart :data="{classData,studentData,tagData}"></TagAverageEchart>
            </el-col>
            <el-col :span="24" class="item">
              <DangerStudent :data="{classData,studentData,tagData}"></DangerStudent>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
import TagAverageEchart from '../../components/home/TagAverageEchart.vue';
import ClassAverageEchart from '../../components/home/ClassAverageEchart.vue';
import DangerStudent from '../../components/home/DangerStudent.vue';
const tagData = ref([])
const studentData = ref([])
const classData = ref([])
const isCreated = ref(false)
onMounted(async ()=>{
  //并发请求
  await Promise.all([getTagData(),getStudentData(),getClassData()])
  // await getTagData()
  // await getStudentData()
  // await getClassData()
  isCreated.value = true
})
const getTagData = async () => {
  const res = await axios.get('/admin/tags')
  tagData.value = res.data
}
const getStudentData = async () =>{
  const res = await axios.get('/admin/students')
  studentData.value = res.data
}
const getClassData = async () => {
  const res = await axios.get('/admin/classes')
  classData.value = res.data
}
</script>
<style scoped lang='scss'>
.parent {
  // margin-top: -200px;
  height: 500px;

  .item {
    height: 250px;
  }
}

#Home {
  background: url(../../assets/aaa.jpg) repeat center;
  background-size: 100% 100%;
  padding: 10px;
  height: 650px;
  border-radius: 20px;
}
.el-card{
  border-radius: 30px;
  background: url(../../assets/t_bg.png) repeat center;
  background-size: 2000px 1000px;
}
:deep(.el-card__body){
  border-radius: 20px;
  background: url(../../assets/t_bg.png) repeat center;
  background-size: 2000px 1000px;
}
:deep(.el-scrollbar__view) {
  height: 650px;
  width: 1350px;
  border-radius: 20px;
}
</style>